<template>
    <!--    卡片集合-->
    <a-row class="row" :gutter="16">
        <a-col :span="6">
            <a-card title="订单数">
                <template #extra>
                    <a-tag color="#f50">月</a-tag>
                </template>
                <div class="smallCard">
                    <div style="padding: 1rem 1rem 1rem 1rem;display: flex;align-items: center;justify-content: space-between">
                        <span style="text-align: left;font-size: 1.5rem;line-height: 2rem">{{businessData.currentOrders}}单</span>
                        <img src="@/assets/图片1.png" style="width: 40px;height: 40px;text-align: right">
                    </div>
                    <div style="padding: 1rem 1rem 1rem 1rem;display: flex;align-items: center;justify-content: space-between">
                        <span style="text-align: left;font-size: 1rem;line-height: 1rem">总订单数</span>
                        <span style="text-align: left;font-size: 1rem;line-height: 1rem">{{businessData.totalOrders}}单</span>
                    </div>
                </div>
            </a-card>
        </a-col>
        <a-col :span="6">
            <a-card title="成交额">
                <template #extra>
                    <a-tag color="#2db7f5">月</a-tag>
                </template>
                <div class="smallCard">
                    <div style="padding: 1rem 1rem 1rem 1rem;display: flex;align-items: center;justify-content: space-between">
                        <span style="text-align: left;font-size: 1.5rem;line-height: 2rem">${{businessData.currentTurnover}}</span>
                        <img src="@/assets/图片2.png" style="width: 40px;height: 40px;text-align: right">
                    </div>
                    <div style="padding: 1rem 1rem 1rem 1rem;display: flex;align-items: center;justify-content: space-between">
                        <span style="text-align: left;font-size: 1rem;line-height: 1rem">总成交额</span>
                        <span style="text-align: left;font-size: 1rem;line-height: 1rem">${{businessData.totalTurnover}}</span>
                    </div>
                </div>
            </a-card>
        </a-col>
        <a-col :span="6">
            <a-card title="本周畅销">
                <template #extra>
                    <a-tag color="#87d068">周</a-tag>
                </template>
                <div class="smallCard">
                    <div style="padding: 1rem 1rem 1rem 1rem;display: flex;align-items: center;justify-content: space-between">
                        <span style="text-align: left;font-size: 1.5rem;line-height: 2rem">{{businessData.weekPopularProduct.productName}}</span>
                        <img src="@/assets/图片3.png" style="width: 40px;height: 40px;text-align: right">
                    </div>
                    <div style="padding: 1rem 1rem 1rem 1rem;display: flex;align-items: center;justify-content: space-between">
                        <span style="text-align: left;font-size: 1rem;line-height: 1rem">成交量</span>
                        <span style="text-align: left;font-size: 1rem;line-height: 1rem">{{businessData.weekPopularProduct.total}}台</span>
                    </div>
                </div>
            </a-card>
        </a-col>
        <a-col :span="6">
            <a-card title="年度畅销">
                <template #extra>
                    <a-tag color="purple">年</a-tag>
                </template>
                <div class="smallCard">
                    <div style="padding: 1rem 1rem 1rem 1rem;display: flex;align-items: center;justify-content: space-between">
                        <span style="text-align: left;font-size: 1.5rem;line-height: 2rem">{{businessData.weekPopularProduct.productName}}</span>
                        <img src="@/assets/图片4.png" style="width: 40px;height: 40px;text-align: right">
                    </div>
                    <div style="padding: 1rem 1rem 1rem 1rem;display: flex;align-items: center;justify-content: space-between">
                        <span style="text-align: left;font-size: 1rem;line-height: 1rem">成交量</span>
                        <span style="text-align: left;font-size: 1rem;line-height: 1rem">{{businessData.weekPopularProduct.total}}台</span>
                    </div>
                </div>
            </a-card>
        </a-col>
    </a-row>
    <!--    大图-->
    <a-row class="row">
        <a-col :span="24">
            <a-card :tab-list="[{key: 'a',tab: '库存明细'},{key: 'b',tab: '年度成交额'}]"
                    :active-tab-key="key"
                    @tabChange="tabChange">
                <template v-if="key === 'a'">
                    <div class="bigEcharts" id="inventoryInfo"></div>
                </template>
                <template v-else-if="key === 'b'">
                    <div class="bigEcharts" id="turnoverInfo"></div>
                </template>
            </a-card>
        </a-col>
    </a-row>
    <!--    小图集合-->
    <a-row class="row" :gutter="16">
        <a-col :span="8">
            <a-card title="产品总营销额排行">
                <div class="smallEcharts" id="salesInfo"></div>
            </a-card>
        </a-col>
        <a-col :span="8">
            <a-card title="产品总利润排行">
                <div class="smallEcharts" id="profitInfo"></div>
            </a-card>
        </a-col>
        <a-col :span="8">
            <a-card title="每天生产计划">
                <div class="smallEcharts" id="planInfo"></div>
            </a-card>
        </a-col>
    </a-row>
</template>

<script>
    import {ref, onMounted, nextTick} from 'vue'
    import Icon, {HomeOutlined} from '@ant-design/icons-vue';
    import axios from 'axios'
    import * as echarts from "echarts";

    export default {
        name: "HomeContent",
        components: {
            Icon
        },
        setup() {
            const key = ref('a')
            const businessData = ref({
                weekPopularProduct: {},
                yearPopularProduct: {},
            })
            const inventoryData = ref([])
            const turnoverData = ref([])
            const salesData = ref([])
            const profitData = ref([])
            const planData = ref([])

            const tabChange = (val) => {
                console.log(val)
                key.value = val

                nextTick(() => {
                    if (key.value == 'a') {
                        inventoryInfo(inventoryData.value)
                    } else {
                        turnoverInfo(turnoverData.value)
                    }
                })
            }

            const loadBusinessData = () => {
                axios.get('statistic/getBusinessData').then(rs => {
                    console.log("经营数据", rs.data)
                    businessData.value = rs.data
                })
            }

            const loadInventoryAndTurnoverData = () => {
                axios.get('statistic/getInventoryAndTurnoverData').then(rs => {
                    console.log("库存和年度成交额数据", rs.data)
                    inventoryData.value = rs.data.inventoryList
                    turnoverData.value = rs.data.turnoverList
                    if (key.value == 'a') {
                        inventoryInfo(inventoryData.value)
                    } else {
                        turnoverInfo(turnoverData.value)
                    }
                })
            }

            const loadSalesAndProfitAntPlanData = () => {
                axios.get('statistic/getSalesAndProfitAndPlanData').then(rs => {
                    console.log("各产品总营销额、利润以及生产计划数据", rs.data)
                    salesData.value = rs.data.salesList
                    profitData.value = rs.data.profitList
                    planData.value = rs.data.planList

                    salesInfo(salesData.value)
                    profitInfo(profitData.value)
                    planInfo(planData.value)

                })
            }

            const inventoryInfo = (inventoryData) => {
                // 基于准备好的dom，初始化echarts实例
                const myChart = echarts.init(document.getElementById('inventoryInfo'));
                const option = {
                    tooltip: {},
                    xAxis: {
                        type: 'category',
                        data: inventoryData.map(item => item.name)
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '库存',
                            data: inventoryData.map(item => item.value),
                            type: 'line',
                            smooth: true
                        }
                    ]
                }
                // 绘制图表
                myChart.setOption(option);
            }

            const turnoverInfo = (turnoverData) => {
                // 基于准备好的dom，初始化echarts实例
                const myChart = echarts.init(document.getElementById('turnoverInfo'));
                const option = {
                    tooltip: {},
                    xAxis: {
                        type: 'category',
                        data: turnoverData.map(item => item.name + "月"),
                        // axisLabel: {
                        //     rotate: -60
                        // }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '成交额(元)',
                            data: turnoverData.map(item => item.value),
                            type: 'bar',
                            smooth: true
                        }
                    ]
                }
                // 绘制图表
                myChart.setOption(option);
            }

            const salesInfo = (data) => {
                // 基于准备好的dom，初始化echarts实例
                const myChart = echarts.init(document.getElementById('salesInfo'));
                const option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {},
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: data.map(item => item.name),
                        // axisLabel: {
                        //     rotate: -60
                        // }
                    },
                    series: [
                        {
                            name: '营销额',
                            type: 'bar',
                            data: data.map(item => item.value)
                        }
                    ]
                };
                // 绘制图表
                myChart.setOption(option);
            }

            const profitInfo = (data) => {
                // 基于准备好的dom，初始化echarts实例
                const myChart = echarts.init(document.getElementById('profitInfo'));
                const option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {},
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: data.map(item => item.name)
                    },
                    series: [
                        {
                            name: '利润',
                            type: 'bar',
                            data: data.map(item => item.value),
                            itemStyle: {
                                color: "rgba(13, 255, 0, 1)"
                            }
                        }
                    ]
                };
                // 绘制图表
                myChart.setOption(option);
            }

            const planInfo = (data) => {
                // 基于准备好的dom，初始化echarts实例
                const myChart = echarts.init(document.getElementById('planInfo'));
                const option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        left: 'center',
                        top: '5%'
                    },
                    series: [
                        {
                            name: '每天生产数量',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 40,
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: data
                        }
                    ]
                };
                // 绘制图表
                myChart.setOption(option);
            }

            onMounted(() => {
                loadBusinessData()
                loadInventoryAndTurnoverData()
                loadSalesAndProfitAntPlanData()
            })

            return {
                key,
                tabChange,
                businessData,
                inventoryData,
                turnoverData
            }
        }
    }
</script>

<style scoped>
    .row {
        padding: 16px 16px 0 16px
    }

    .bigEcharts {
        width: 100%;
        height: 280px;
    }

    .smallEcharts {
        width: 100%;
        height: 300px;
    }

    .smallCard {
        width: 100%;
        height: 110px;
    }

</style>